<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哈希路由</title>
</head>
<body>
    <h2>实现哈希路由，可以实现根据a标签哈希值的变换切换不同的组件进行展示</h2>
    <div id="app">
        <h3>动态组件的部分记住需要使用v-bind绑定</h3>
        <component :is="urlHash"></component>
    </div>
    <a href="#hash1">切换路由到hash1</a>
    <a href="#hash2">切换路由到hash2</a>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>

        // 原理确认
        window.addEventListener("hashchange",(e)=>{
            console.log(window.location.hash.slice(1));
            // 监听到后切换vm的数据，触发数据更新
            vm.urlHash = window.location.hash.slice(1);
        });

        const vm = new Vue({
            el:"#app",
            data(){
                return {
                    urlHash:""// 记得初始化数据选项
                }
            },
            components:{
                'hash1':{
                    name:"hash1",
                    render(h){
                        return h('h3','这里是路由1展示的组件。');
                    }
                },
                'hash2':{
                    name:"hash2",
                    render(h) {
                        return h('h3','这里是路由2展示的组件。');
                    },
                }
            }
        });

    </script>
</body>
</html>